import React, { Component, lazy, Suspense } from 'react';
import { HashRouter as Router, Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import { getLocalCityAction } from "./store/actionCreator";
//  home 其实是一个 tabbar 
import Home from "./pages/home";
// 地图找房
// import MapFound from "./pages/mapFound";
// 城市选择
const CitySelect = lazy(() => import("./pages/citySelect"));

// 1 修改看 组件的引入方式
const MapFound = lazy(() => import("./pages/mapFound"));

// 2 定义一个转场的组件 
const Loading = () => <div style={{ position: "fixed", width: "100vw", height: "100vh", top: 0, left: 0, backgroundColor: "#000" }} ></div>

class App extends Component {
  componentDidMount() {
    this.props.initCity();
  }
  render() {
    return (
      <div className="App">
        {this.props.cityName &&
          <Router>
            {/* 3 使用  Suspense 包起来 其他的页面    fallback 要指定一个 转场组件即可  */}
            <Suspense fallback={<Loading />}>
              <Route component={Home} path="/home"  ></Route>
              <Route path="/" exact >
                <Redirect to="/home" ></Redirect>
              </Route>
              <Route component={MapFound} path="/mapfound" exact ></Route>
              <Route component={CitySelect} path="/cityselect" exact ></Route>
            </Suspense>
          </Router>
        }
      </div>
    );
  }
}


const mapStateToProps = (state) => ({
  cityName: state.mapReducer.city.name
})




// 负责将 action映射到组件的props中
const mapDispathToProps = (dispatch) => {
  return {
    initCity() {
      dispatch(getLocalCityAction());
    }
  }
}

export default connect(mapStateToProps, mapDispathToProps)(App);
